<template>
    <div>
   <h1>显示用药信息列表</h1>
    </div>
    科室类型:
      <select v-model="ya.departmentId">
                        <option value="0">==请选择科室类型==</option>
                        <option v-for="a in obj" :value="a.departmentId">{{a.departmentNmae}}</option>
                    </select>

    配药医生:
       <input type="text" v-model="ya.name">
     <input type="button" value="查询" @click="selaae">
     <input type="button" value="批量修改状态" @click="pupad" style="color:brown;">
    <table class="table">
           <thead >
               <tr class="table-header" style="background-color: aqua;">
                 <td>
                    <input type="checkbox" v-model="seleua" @change="seas">
                 </td>
                 <td>药品名称</td>
                 <td>科室名称</td>
                 <td>用药日期</td>
                   <td>病人名称</td>
                 <td>病房号码</td>
                 <td>配药医生</td>   
                 <td>状态</td>
               </tr>
           </thead>
  
             <tbody >
               <tr v-for="a in data" > 
                 <td>   
                     <input type="checkbox" v-model="idasy" :value="a.medicationId">
                 </td>
                 <td>{{a.medicationName}}</td>
                 <td>{{a.departmentNmae}}</td>
                 <td>{{moment( a.medicationDate).format("yyyy-MM-DD")}}</td>
                 <td>{{a.name}}</td>
                 <td>{{a.medicationPhone}}</td>
                 <td>{{a.doctor}}</td>   
                 <td>{{a.state==true?"已完成":"未完成"}}</td>
                 <td>
                     <input type="button" value="逻辑删除" @click="deley(a.medicationId)" style="color: brown;">
                     <input type="button" value="修改" @click="upd(a.medicationId)">
                 </td>
               </tr>
           </tbody>
     </table>

   一共{{ya.count }}条,每页显示{{ya.size}}条,当前{{ya.mummber}}页,共{{ya.index}}页

     <input type="button" value="首页"  @click="pars(1)" style="color: chocolate;">
  <input type="button" value="上一页"  @click="pars(2)" style="color: aquamarine;">
   <input type="button" :value="b" v-for="b in ya.mummber" @click="yu(b)" style="color: cadetblue;">
    <input type="button" value="下一页"  @click="pars(3)" style="color: aqua;">
      <input type="button" value="尾页"  @click="pars(4)" style="color: cadetblue;">

       <input type="mumber" style="width:45px;height: 45px;" v-model="ya.index"><input type="button" value="跳转" @click="tz" style="color: coral;">

  <select v-model="ya.size" @change="te" style="color: bisque;">
      <option value="0">0</option>
       <option value="1">1</option>
 <option value="2">2</option>
  <option value="3">3</option>


  </select>
</template>

<script setup lang="ts">
 import axios from 'axios';
  import {ref,onMounted} from 'vue';
  import moment from 'moment';

  import {useRouter} from 'vue-router';
import router from '@/router';

 onMounted(()=>{
    departments();
    ShowMedication();
 })


 const upd=(id:any)=>{
   router.push({path:"/updatee",query:{medicationId:id}})
     
 }
  


  const yu=(val:any)=>{
     ya.value.index=val;
     ShowMedication();

  }
   const te=()=>{
       ya.value.index=1;
       ShowMedication();
   } 


    const seleua=ref(false);

     const seas=()=>{
         idasy.value=[];
          if(seleua.value){

             data.value.forEach(e=>{
                 idasy.value.push(e.medicationId);
             })
          }else
          {
            idasy.value=[];

          }
     }


     const idasy=ref([]);

    const pupad=()=>{
         axios.delete("https://localhost:7170/api/Medication/PudataStete",{params:{idstrings:idasy.value.toString()}}).then(res=>{
             if(res.data>0){
               alert("修改状态成功");
ShowMedication();
             }else{
                   alert("修改状态失败");
             }
         })
    }

    const deley=(id:any)=>{

         if(confirm("确认要删除吗")){
          axios.get("https://localhost:7170/api/Medication/IsDeleteState?id="+id).then(res=>{
             if(res.data>0){
              alert("逻辑删除成功");
               return;
             }else{
                   alert("逻辑删除失败");
             }
         })
         }
    
    }


    const tz=(val:any)=>{
         if(ya.value.index>1&&ya.value.index<ya.value.mummber){
ShowMedication();
         }else{
            ya.value.index=1;

         }
    }

     const  pars=(val:any)=>{
        if(val==1){
           ya.value.index=1;
          ShowMedication();
           }

    if(val==2&&ya.value.index>1){
           ya.value.index--;
          ShowMedication();
           }


             if(val==3&&ya.value.index<ya.value.mummber){
           ya.value.index++;
          ShowMedication();
           }


             if(val==4){
           ya.value.index=ya.value.mummber;

          ShowMedication();
           }


     }
  


 const obj=ref({
    "departmentId": 0,
    "departmentNmae": "",
    "departmentImg": "",
    "departmentDate": ""
 })
 const departments=()=>{
     axios.get("https://localhost:7170/api/Department/departments").then(res=>{
          obj.value=res.data;

     })
 }

  const selaae=()=>{
    ShowMedication(); 
  }

  const ya=ref({
     name:"",
     departmentId:0,
     index:1,
     size:2,
     count:0,
     mummber:0,
  })


   const data=ref([{
        "name": "张艺馨",
      "departmentId": 2,
      "medicationName": "胃舒平",
      "state": true,
      "medicationPhone": "9-293",
      "medicationDate": "2023-12-27T00:00:00",
      "medicationId": 1005,
      "departmentNmae": "儿科",
      "doctor": "林依婷"
   }])




  const ShowMedication=()=>{
     axios.get("https://localhost:7170/api/Medication/ShowMedication",{params:ya.value}).then(res=>{
         data.value=res.data.mummber;
      ya.value.count=res.data.count;
     ya.value.mummber=Math.ceil(ya.value.count/ya.value.size);


     })
  }
</script>

<style scoped>

</style>